<template>
  <Wp-container>
    <template slot="header">
      <el-row>
        <el-col :span="8">
          <div class="wp-header__label">
              <i class="el-icon-menu"></i>
               <span slot="title">员工与部门管理</span>
        </div>
        </el-col>
        <el-col :span="8">
            <search-bar :search="searchParams" @on-search="searchData">
               <el-form :model="searchParams" inline class="search-form-inline">
                    <el-form-item>
                      <el-input class="wp-form-280" clearable v-model="searchParams.keyword" placeholder="员工名称/手机号码"></el-input>
                    </el-form-item>
               </el-form>
            </search-bar>
        </el-col>
      </el-row>
    </template>
    <template slot="aside">
        <div class="wp-aside__title">
          企业组织架构
        </div>
         <div class="wp-aside__content">
          <div class="section">
            <div class="section__title">员工</div>
            <div class="section__content">
                <el-menu :default-active="activeIndex" @select="handleSelectEmpClick(item.type)" v-for='(item,index) in empTypeList' :key="index">
                   <el-menu-item :index="item.type">
                   <i class="el-icon-user-solid"></i>
                    <span slot="title">{{item.typeName}}{{empTypeCountInfo[item.countKey]?'('+empTypeCountInfo[item.countKey]+')':''}}</span>
                  </el-menu-item>
               </el-menu>
             </div>
          </div>
           <div class="section">
            <div class="section__title">部门
              <el-button
                v-if="deptSaveAuth"
                type="text"
                icon="el-icon-circle-plus"
                class="add-btn"
                @click="addDept">创建部门</el-button>
            </div>
            <div class="section__content">
            <Department @clickNode="handleSelectDeptClick" :refreshDept.sync="refreshDept"/>
            </div>
          </div>
         </div>
    </template>
    <template slot="default">
      <Emp-dept v-if="loadFlag" ref="empDeptRef" @refreshDept="refreshDept=true" @refreshEmp="statisticsEmployeeCount" :keywordParam="searchParams" :initSelectInfo="initSelectInfo" initSourceType="employee"/>
    </template>
    <Create-dept-panel v-if="visibleDept" :visible.sync="visibleDept" title="创建部门" @afterSave="refreshDept=true"/>
  </Wp-container>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import WpContainer from '../components/WpContainer'
import Department from '../components/department'
import EmpDept from './components/Emp_dept'
import CreateDeptPanel from './components/create/DepartmentPanel'
import Mixins from './mixins'
export default {
  components: {SearchBar, WpContainer, Department, EmpDept, CreateDeptPanel},
  mixins: [Mixins],
  data () {
    return {
      deptSaveAuth: true,
      empTypeCountInfo: {},
      initSelectInfo: {},
      activeIndex: '1',
      loadFlag: false,
      visibleDept: false,
      refreshDept: false,
      empTypeList: [
        {type: '1', typeName: '全部员工', countKey: 'allEmpCount', desc: '未添加部门和职位的员工无法正常登录系统'},
        {type: '2', typeName: '新加入的员工', countKey: 'newEmpCount', desc: '入职7天内的员工'},
        {type: '3', typeName: '激活的员工', countKey: 'activatedEmpCount', desc: '已经登录系统的员工'},
        {type: '4', typeName: '未激活的员工', countKey: 'unActivatedEmpCount', desc: '未登录系统的员工'},
        {type: '5', typeName: '停用的员工', countKey: 'suspendEmpCount', desc: '不可登录系统的员工'},
        {type: '6', typeName: '离职员工', countKey: 'departureEmpCount', desc: '公司离职人员'}
      ]
    }
  },
  created () {
    this.statisticsEmployeeCount().then(res => {
      this.loadFlag = true
      this.initSelectInfo = this.getEmpTypeSelectInfo(this.activeIndex)
    })
  },
  methods: {
    getEmpTypeSelectInfo (index) {
      this.activeIndex = index
      return this.empTypeList.find(v => {
        v.count = this.empTypeCountInfo[v.countKey]||0
        return v.type === index
      })
    },
    handleSelectEmpClick (index) {
      const empTypeSelectInfo = this.getEmpTypeSelectInfo(index)
      this.searchData(empTypeSelectInfo, 'employee')
    },
    handleSelectDeptClick (dept) {
      this.activeIndex = '-1'
      const deptSelectInfo = {...dept}
      this.searchData(deptSelectInfo, 'department')
    },
    statisticsEmployeeCount () {
      return new Promise((resolve, reject) => {
        this.requestOption('statisticsEmployeeCount', null, res => {
          this.empTypeCountInfo = res.data || {}
          resolve(res)
        })
      })
    },
    handelSearch () {
      this.searchData(this.searchParams, 'searchBtn')
    },
    searchData (searchParams, sourceType) {
      this.$refs.empDeptRef.handleSearch(searchParams, sourceType)
    },
    addDept () {
      this.visibleDept = true
    },
    refreshDepartment () {

    }
  }
}
</script>

<style lang="scss" scoped>
.wp-header__label{
    font-size: 18px;
    color: #333;
    font-weight: 600;
}
.wp-aside__title{
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #e6e6e6;
}
.wp-aside__content{
    overflow: auto;
    height: calc(100% - 50px);
    overflow-y: overlay;
    overflow-x: overlay;
}
.section {
  position: relative;
  &__title {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding: 15px;
    .add-btn {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }
}
>>>.el-menu{
  border: 0px;
}
>>>.el-menu-item{
  height: 40px;
  line-height: 40px;
}
</style>
